<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_Ajax-添加额外参数</title>
</head>
<body>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      //1. 在data中提交查询字符串
      $.ajax({
        url: 'http://httpbin.org/post',
        method: 'post',
        data: {
          name: '张三',
          age: 18
        },
        success: function(res) {
          console.log(res)
        }
      })

      //2. 在data中提交json字符串
      $.ajax({
        url: 'http://httpbin.org/post',
        method: 'post',
        data: JSON.stringify({ name: '张三', age: 18}),
        success: function(res) {
          console.log(res)
        }
      })

      //3. 在data中提交FormData对象
      const formData = new FormData()
      formData.append('name', '张三')
      formData.append('age', 18)
      $.ajax({
        url: 'http://httpbin.org/post',
        method: 'post',
        data: formData,
        processData: false, // processData:true, 会将data为对象的转成查询字符串
        contentType: false, // 使用 原生 XHR 默认的 contentType
        success: function(res) {
          console.log(res)
        }
      })

      // 4. 在data中提交查询字符串，并在headers中设置Content-Type
      $.ajax({
        url: 'http://httpbin.org/post',
        method: 'post',
        data: 'name=张三&age=18',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function(res) {
          console.log(res)
        }
      })
      
    })

  </script>
  
</body>
</html>